<template>
	<view class="page-box" :class="{overhidden:isOk}">
		<uni-cusTitle title=' ' :isIcon='true'></uni-cusTitle>
		<view class="bg-box">
			<image :src="`${staticUrl}mine/bg_youhui.png`" mode="scaleToFill"></image>
		</view>

		<view class="content-box">
			<view class="s-content-box">
				<view class="big-box">
					<view class="s-box">
						<image class="wh100" :src="detail.imgurl" mode="aspectFill"></image>
					</view>
				</view>
				<view class="title">{{detail.title}}</view>

				<view class="phone-box">
					<view class="item" @click="phoneTap">
						<view class="top">
							<view class="pos-title">联系电话</view>
							<text>{{detail.phone}}</text>
						</view>
						<view class="bom">
							<uni-icons type="phone-filled" color='#884FFF' size="30"></uni-icons>
							<text>联系TA</text>
						</view>
					</view>
					<view class="item" @click="mapTap">
						<view class="top">
							<view class="pos-title">门店地址</view>
							<text style="font-size: 28rpx;">{{detail.addr}}</text>
						</view>
						<view class="bom">
							<uni-icons type="paperplane-filled" color='#884FFF' size="30"></uni-icons>
							<text>距您1.8Km</text>
						</view>
					</view>
				</view>

				<view class="s-title">活动说明</view>
				<view class="detail" v-html="detail.text"></view>
              
				<view class="daka-btn"  v-if="!imgUrl" @click="showMaskTap">
					<image src="/static/index/daka.png"></image>
					<text>立即打卡</text>
				</view>
				<view class="daka-btn daka-btn2" v-else>
					<image src="/static/index/dakaok.png"></image>
					<text>打卡成功</text>
				</view>
			</view>
		</view>

		<!-- 弹框 -->
		<uni-popup ref="popup" background-color="transparent">
			<view class="popup-content">
				<view class="close" @click.stop="closeTap"><uni-icons type="closeempty" color='#884FFF'
						size="24"></uni-icons></view>
				<view class="upload-box">
					<view class="up-box" v-if="!imgUrl" @click="uploadTap">
						<uni-icons type="image-filled" color='#CCACFD' size="52"></uni-icons>
						<view>点击上传景区照片 完成打卡</view>
					</view>
					<view class="up-box" style="padding: 0;" v-else>
						<image class="wh100" :src="imgUrl" mode="aspectFill"></image>
						<view class="del-box" @click.stop="imgUrl=''">
							<uni-icons type="trash" color="#FD4A5C" size="24"></uni-icons>
						</view>
					</view>
				</view>
				<view style="width: 100%;height: 50rpx;padding:0  20rpx;">
					<view style="text-align: center;"><text v-if="pinfen == 0">点击评分</text><text v-else>非常棒！</text></view>
					<view style="display: flex; justify-content: center; align-items: center; width: 100%; padding-top:20rpx">
						<uni-section  type="line" padding>
							<uni-rate v-model="rateValue" @change="onChange" :size="26" />
						</uni-section>
					</view>
				
				</view>
				
				<view class="daka-btn1" v-if="!imgUrl">
					<image src="/static/index/daka.png" v-show="false"></image>
					
					<text>确认打卡</text>
				</view>
				<view class="daka-btn1 daka-btn2" @click="closeTap" v-else>
					<image src="/static/index/daka.png" v-show="false"></image>
					<text>确认打卡</text>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="popupa" background-color="transparent">
			<view class="popup-contenta">
				<image src="http://www.qidoer.com/xcx/static/index/bg01.png"></image>
				
				<view class="title">
					<view>天生桥景区优惠券</view>
					<text>（有效期至2024.12.12）</text>
				</view>
				<view class="price">
					<view class="num">
						90
						<text>元</text>
					</view>
					<text class="tip">满100元可用</text>
				</view>
				<view class="bottom">
					<view class="daka-btn" @click="hideMask">
						<text>立即使用</text>
					</view>
					<text class="ok"  @click="hideMask">好的，知道了</text>
				</view>
			</view>
		</uni-popup>
		<view class="isOk" v-if="isOk">
			<view class="">
				<view class="okimg">
					<image src="../../static/xinz/dakaok.png"></image>
				</view>
				<view class="oktext">
					恭喜您打卡成功！
				</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isOk:false,
				staticUrl:this.$base.staticUrl,
				imgUrl: '',
				pinfen:0,
				rateValue:3,
				isYHQ:false, //是否有优惠券
				detail: {
					imgurl: '/static/top_back.png',
					title: '天生桥景区',
					phone: '18762898233',
					addr: '华侨路街道管家桥明华新村15号楼1层',
					latitude: 39.908,
					longitude: 116.396,
					text: '规则说明规则说明规则说明规则说明规则说明规则说明规则说明规则说明规则说明规则说明规则说明规则说明规则说明规则说明规则说明规则说明规则说明规则说明规则说明规则说明规则说明规则说明规则说明规则说明规则说明规则说明规则说明规则说明规则说明规则说明规则说明规则说明规则说明规则说明规则说明规则说明规则说明规则说明规则说明规则说明'
				}
			}
		},

		onLoad() {

		},
		methods: {
			onChange(e) {
				console.log('rate发生改变:' + JSON.stringify(e))
				this.pinfen = 1
			},
			phoneTap() {
				uni.makePhoneCall({
					phoneNumber: this.detail.phone
				});
			},

			mapTap() {
				uni.openLocation({
					latitude: this.detail.latitude * 1,
					longitude: this.detail.longitude * 1
				})
			},
             showMask() {
             	this.$refs.popup.open('center')
             },
             hideMask(){
				 uni.navigateTo({
				 	url:"/pages/my/huiDetail"
				 })
             	this.$refs.popupa.close()
             },
			showMaskTap() {
				this.$refs.popup.open('bottom')
			},
			closeTap() {
				this.$refs.popup.close()
				if(this.isYHQ){
					this.$refs.popupa.open('center')
					
				}else{
					this.isOk = true
					let timer = setInterval(() => {
						//TODO
						this.isOk = false
					}, 3000);
				}
				
				
			},

			uploadTap() {
				var _this = this
				uni.chooseImage({
					success: (chooseImageRes) => {
						console.log(chooseImageRes);
						_this.imgUrl=chooseImageRes.tempFilePaths[0]
					}
				});
			}
		}
	}
</script>

<style scoped lang="scss">
	.overhidden{
		height: 100%;
		overflow: hidden;
		padding-bottom: 0;
	}
	.bg-box {
		width: 100%;
		height: 260rpx;
		overflow: hidden;

		image {
			width: 100%
		}
	}
	.isOk{
		background: rgba(0,0,0,0.2);
		backdrop-filter: blur(12px);
		height: 100vh;
		width: 100%;
		position: absolute;
		left: 0;
		top: 0;
		z-index: 99999999;
		display: flex;
		justify-content: center;
		justify-items: center;
		align-items: center;
		.okimg{
			image{
				width:320rpx;
				height: 320rpx;
			}
		}
		.oktext{
			
			font-size: 36rpx;
			font-weight: normal;
			color: #FFDD57;
			line-height: 52rpx;
		}
	}
	.content-box {
		width: 100%;
		background: #FAEDFC;
		border-top-left-radius: 80rpx;
		border-top-right-radius: 80rpx;
		padding-top: 42rpx;
		margin-top: -36rpx;
		position: relative;
		z-index: 10;

		.s-content-box {
			width: 100%;
			padding: 0 30rpx;
			box-sizing: border-box;
			transform: translateY(-72rpx);
			display: flex;
			flex-direction: column;
			align-items: center;

			.big-box {
				width: 240rpx;
				height: 240rpx;
				background: #884FFF;
				border-radius: 32rpx;
				transform: translateY(-16rpx);

				.s-box {
					width: 240rpx;
					height: 240rpx;
					border-radius: 32rpx;
					overflow: hidden;
					transform: translate(-5rpx, -5rpx);
				}
			}

			.title {
				height: 56rpx;
				margin: 18rpx 0 44rpx;
				font-size: 48rpx;
				font-weight: bold;
				color: #002A3A;
			}

			.phone-box {
				width: 100%;
				height: 244rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 52rpx;

				.item {
					width: 332rpx;
					height: 100%;
					background: #FFDD57;
					border-radius: 40rpx;
					display: flex;
					padding-top: 8rpx;
					flex-direction: column;
					align-items: center;

					.top {
						width: 94%;
						height: 160rpx;
						display: flex;
						justify-content: center;
						align-items: center;
						font-weight: bold;
						font-size: 36rpx;
						position: relative;
						background: #fff;
						border-radius: 40rpx;
						padding: 0 30rpx;
						padding-top: 30rpx;
						box-sizing: border-box;
						text-align: center;

						text {
							margin-top: 16rpx;
						}

						.pos-title {
							width: 160rpx;
							height: 52rpx;
							background: #FFDD57;
							border-radius: 0rpx 0rpx 24rpx 24rpx;
							display: flex;
							justify-content: center;
							align-items: center;

							font-size: 26rpx;
							color: #884FFF;
							font-weight: bold;
							position: absolute;
							top: 0;
							left: 50%;
							transform: translateX(-50%);
						}
					}

					.bom {
						flex: 1;
						display: flex;
						justify-content: center;
						align-items: center;
						color: #884FFF;

						text {
							margin-left: 6rpx;
						}
					}
				}
			}

			// 活动说明
			.s-title {
				width: 100%;
				display: flex;
				justify-content: flex-start;
				align-items: center;
				height: 52rpx;
				font-size: 36rpx;
				font-weight: bold;
				color: #002A3A;
				margin-bottom: 10rpx;

				&::before {
					content: '';
					display: block;
					width: 6rpx;
					height: 32rpx;
					background: #884FFF;
					border-radius: 4rpx;
					margin-right: 16rpx;
				}
			}

			.detail {
				font-size: 28rpx;
				color: #3A525E;
				line-height: 23px;
				font-weight: bold;
			}

			.daka-btn {
				width: 494rpx;
				height: 96rpx;
				background: #FFDD57;
				border-radius: 48rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				margin-top: 66rpx;

				font-size: 36rpx;
				font-weight: bold;
				color: #884FFF;

				image {
					width: 48rpx;
					height: 48rpx;
					margin-right: 16rpx;
				}
			}
			
			.daka-btn2 {
				background: #E7E9EA;
				color: #fff;
			}
		}
	}

	.popup-content {
		height: 700rpx;
		background: #FAEDFC;
		border-top-left-radius: 30rpx;
		border-top-right-radius: 30rpx;
		position: relative;

		.close {
			width: 64rpx;
			height: 64rpx;
			border-radius: 50%;
			background: #F8DEFC;
			text-align: center;
			line-height: 64rpx;
			position: absolute;
			top: 30rpx;
			right: 30rpx;
		}

		.upload-box {
			height: 360rpx;
			padding-top: 100rpx;
			display: flex;
			justify-content: center;
			align-items: center;

			.up-box {
				width: 360rpx;
				height: 360rpx;
				margin: 36rpx 0;
				padding: 30rpx;
				box-sizing: border-box;
				background: #F8DEFC;
				border-radius: 48rpx;
				border: 6rpx solid #CCACFD;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				overflow: hidden;
				position: relative;

				view {
					font-size: 30rpx;
					font-weight: bold;
					color: #CCACFD;
					line-height: 42rpx;
					text-align: center;
					margin-top: 10rpx
				}

				.del-box {
					width: 64rpx;
					height: 64rpx;
					position: absolute;
					top:10rpx;
					right:10rpx;
					margin: 0;
					background: rgba(0, 0, 0, 0.3);
					border-radius: 50%;
					backdrop-filter: blur(3rpx);
					text-align: center;
					line-height: 64rpx;
				}
			}
		}

		.daka-btn1 {
			width: 494rpx;
			height: 96rpx;
			background: #E7E9EA;
			border-radius: 48rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			margin: 0 auto;
			margin-top: 100rpx;

			font-size: 36rpx;
			font-weight: bold;
			color: #fff;

			image {
				width: 48rpx;
				height: 48rpx;
				margin-right: 16rpx;
			}
		}

		.daka-btn2 {
			background: #FFDD57;
			color: #884FFF;
		}
	}
	.popup-contenta {
		width: 558rpx;
		height: 852rpx;
		position: relative;
	
		image {
			width: 100%;
			height:100%;
		}
		
		.title {
			width: 100%;
			height:130rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			position: absolute;
			bottom: 550rpx;
			left: 0;
			font-size: 26rpx;
			color: #3A525E;
			view{
				font-size: 36rpx;
				font-weight: bold;
				color: #002A3A;
				line-height: 60rpx;
			}
		}
		.price {
			width: 100%;
			height:250rpx;
			position: absolute;
			bottom: 290rpx;
			left: 0;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			.num {
				width: 154rpx;
				font-weight: bold;
				font-size: 128rpx;
				font-family: AaHouDiHei;
				position: relative;
				color: #FD4A5C;
				text {
					display: inline-block;
					width: 64rpx;
					height: 64rpx;
					background: #FFF5CE;
					text-align: center;
					line-height: 64rpx;
					position: absolute;
					right: -20rpx;
					bottom: 20rpx;
					
					font-size: 30rpx;
					color: #FD4A5C;
					text-shadow: 0px 0px 0px #FFDD57;
					border-radius: 50%;
				}
			}
			.tip{
				font-size: 30rpx;
				font-weight: bold;
				color: #3A525E;
			}
		}
		.bottom {
			width: 100%;
			height:250rpx;
			position: absolute;
			bottom: 0;
			left: 0;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			.daka-btn {
				width: 494rpx;
				height: 96rpx;
				background: #FFDD57;
				border-radius: 48rpx;
				display: flex;
				justify-content: center;
				align-items: center;
			
				font-size: 36rpx;
				font-weight: bold;
				color: #884FFF;
			
				image {
					width: 48rpx;
					height: 48rpx;
					margin-right: 16rpx;
				}
			}
			.ok{
				font-size: 30rpx;
				font-weight: bold;
				color: #FFFFFF;
				margin-top:36rpx
			}
		}
	}
</style>